import React from "react";
import ReactDOM from "react-dom";
import {Dropdown, Menu, Modal, Upload} from "antd";
import BaseComponent from "../../../redare/components/BaseComponent";
import {CloudUploadOutlined} from "@ant-design/icons/lib";

import {uploadFile} from "../../../AppApi";
import {uploadExcelType} from "../../../common/ConstField";


/**
 * 导入
 * 2020-10-16 17:44:02 WanJie.Peng 已修改匹配 "antd": "^4.6.3"】 如果是 v3 请参考功放系统
 */
export default class ImportData extends BaseComponent {

  static defaultProps = {
    title: '导入',
    exportname: '模板',
    filename: '',
    upFnBefore: ()=>{
      return true }, //上传之前的回调，判断是否进行文件选择，返回false 不进行上传。
    upFn: ()=>{return new Promise(()=>{})} //父组件传递过来的回调，返回的要是一个Promise对象
  };

  state = {
    file: {},
    showFile: false,
    fileUploading: false
  };

  //上传之前的回调，判断是否进行文件选择，返回false 不进行上传。
  onParentCallbackFnForBefore = undefined;
  // 父组件传递过来的回调，返回的要是一个Promise对象
  onParentCallbackFn = undefined;

  constructor(props) {
    super(props);
  }

  showLoading(){
    this.setState({fileUploading: true});
  }
  closeLoading(){
    this.setState({fileUploading: false});
  }
  closeModal(){
    this.setState({showFile: false, fileUploading: false});
  }


  uploadFile() {
    let file = this.state.file;
    uploadFile(file).then(
      (s_re) => {
        if (this.props.upFn) {
          this.props.upFn(s_re);
        }
      }
    ).catch(
      (f_re) => {
        this.setState({fileUploading: false});
      }
    );

  }



  downTemplateFile(e) {
    let {filename,exportname} = this.props;
    if( !filename ){
      super.toastFail("暂无模板");
      return;
    }
    // this.commonPresenter.
    window.location.href = window.location.origin+ "/api/common/template?fileName="+filename+"&exportName="+exportname;
  }

  //打开文件选择
  openFileSelect() {
    try {
      if( this.props.upFnBefore ){
        if( this.props.upFnBefore() === false ){
          return;
        }
      }
      let upload = ReactDOM.findDOMNode(this.uploadDiv);
      let input = upload.getElementsByTagName('input')[0];
      input.click();
    } catch (e) {
      console.log(e)
    }
  }

  beforeUpload = (file) => {
    this.setState({file: file, showFile: true});
    return false;
  }

  render() {

    let {title, exportname} = this.props;

    return (
      <>

        <div ref={(the)=>{ this.uploadDiv = the }}>
          <div style={{display:"none"}}>
            <Upload
              accept={uploadExcelType}
              beforeUpload={(file) => {
                this.setState({file: file, showFile: true});
                return false;
              }}
              fileList={this.state.fileList}
              ref={(the) => { this.upload = the }}
            >
            </Upload>
          </div>

          <Dropdown.Button
            trigger={'click'}
            placement="bottomCenter"
            htmlType={'file'}
            onClick={() => { this.openFileSelect() }}
            overlay={() => {
              return (
                <Menu>
                  <Menu.Item onClick={(e) => {
                    this.downTemplateFile(e)
                  }}>
                    下载{exportname}
                  </Menu.Item>
                </Menu>
              )
            }}
          >
            <CloudUploadOutlined/>{title}
          </Dropdown.Button>
        </div>
        <Modal
          title={title + "-文件预览"}
          visible={this.state.showFile}
          maskClosable={false}
          centered={true}
          onCancel={() => this.setState({showFile: false,fileUploading: false})}
          onOk={() => {
            this.uploadFile()
          }}
          confirmLoading={this.state.fileUploading}
        >
          {this.state.file.name}
        </Modal>
      </>
    )

  }
}